<template>
  <div class="all">
    <div class="followed" v-for="item, index in props.item" :key="index">
      <div class="top">
        <img :src="'http://43.138.15.137:3000' + item.Video.userAvatar" alt="" @error="userAvatarError">
        <span>@{{ item.Video.userNickname }}</span>
      </div>
      <p>{{ item.Video.videoDesc }}</p>
      <video :src="item.Video.videoPath" :poster="item.Video.videoCover" loop ref="video" :autoplay="index === 0"
        @click="stop(index)">
      </video>
      <div style="position: relative;margin-top: 10px;">
        <!-- 爱心 -->
        <love_icon width="followed" :item="item" @love="love" :isliked="props.isliked" />
        <!-- 消息 -->
        <message_icon width="24" @message="message(item.Video.videoId)" />
        <!-- 消息数量 -->
        <span class="messagenumber">{{ item.WSLCNum.commentNum }}</span>
        <!-- 分享icon -->
        <share_icon title="followed" />
        <!-- 分享数量 -->
        <span class="sharenumber">{{ item.WSLCNum.shareNum }}</span>
        <div style="height: 40px;"></div>
      </div>
    </div>
    <!-- 消息页面 -->
    <Async_remark_part :remarkArr="props.plArr" @ok="ok" qf="followed" :name="props.name" />
    <!-- 消息提示 -->
    <Async_message_part :flag="props.flag" :title="props.title" />
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
// 爱心
import love_icon from './icon/loveNum-icon.vue'
// 信息
import message_icon from './icon/message-icon.vue'
// 分享
import share_icon from './icon/share-icon.vue'
// 消息页面
const Async_remark_part = defineAsyncComponent(() => import('./remark-part.vue'))
// 消息提示
const Async_message_part = defineAsyncComponent(() => import('./message-part.vue'))
const props = defineProps({
  item: {
    type: Array
  },
  isliked: {
    type: Array
  },
  plArr: {
    type: Array
  },
  flag: {
    type: Boolean
  },
  title: {
    type: String
  },
  name: {
    type: String
  }
});
const emit = defineEmits(['stop', 'message', 'love', 'ok'])
// 当前视频DOM
const video = ref(null)
// 头像错误值处理
function userAvatarError(event) {
  // console.log(event.srcElement);
  let img = event.srcElement
  img.src = 'src/assets/avatar/default.png'
  // 防止当原图链接和默认图片链接都失效时，会再次调用失败的方法，就出现了无限循环（闪图）的问题
  img.onerror = null
}

// 点击暂停播放视频
async function stop(index) {
  emit('stop', index, video.value)
}

// 点击爱心
async function love(val) {
  emit('love', val)
}

//点击评论
async function message(val) {
  emit('message', val)
  if (props.name === 'my') {
    document.querySelector('.remark-box1').style.transform = 'translateY(0)';
  } else {
    document.querySelector('.remark-box').style.transform = 'translateY(0)';
  }
}

// 点击ok
async function ok(val) {
  emit('message', val)
}
</script>

<style lang="scss" scoped>
.all {
  height: 96%;
  width: 96%;
  overflow: scroll;
  font-size: 14px;
  color: #fff;
  padding: 2%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.messagenumber,
.sharenumber {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 140px;
  margin-top: 15px;
  font-size: 12px;
  color: #fff;
  z-index: 5;
}

.sharenumber {
  margin-left: 240px;
}

.followed {
  position: relative;
  margin-bottom: 20px;

  .top {
    height: 33px;
    width: 100%;
    display: flex;
    align-items: center;

    img {
      width: 30px;
      height: 30px;
    }

    span {
      margin-left: 8px;
    }
  }

  p {
    height: 14px;
    margin-bottom: 10px;
  }

  video {
    width: 259px;
    height: 400px;
  }

}
</style>